<template>
  <div class="xtx_goods_category">
    <div class="container">
      <div class="xtx_panel_header">
        <h3>{{category.name}}</h3>
        <router-link :to="`/category/${category.id}`" class="more">
          查看全部
          <i class="iconfont icon-angle-right"></i>
        </router-link>
        <div class="tabs-bar">
          <router-link
            v-for="item in category.children"
            :key="item.id"
            :to="`/category/sub/${item.id}`"
          >{{item.name}}</router-link>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods">
        <ul class="clearfix">
          <li>
            <router-link :to="`/category/${category.id}`">
              <img :src="category.picture" alt />
            </router-link>
            <div class="label">
              <span>{{category.name}}馆</span>
              <span>{{category.saleInfo}}</span>
            </div>
          </li>
          <li v-for="item in category.goods" :key="item.id">
            <!-- 商品图片 -->
            <router-link :to="`/product/${item.id}`">
              <div class="img-box">
                <img :src="item.picture" alt />
              </div>
            </router-link>
            <!-- 商品信息 -->
            <div class="meta">
              <p class="name">{{item.name}}</p>
              <p class="flag">{{item.tag}}</p>
              <p class="price">
                <small>￥</small>
                {{item.price}}
              </p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <router-link :to="`/same/${item.id}`">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </router-link>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home-product',
  props: {
    categoryId: {
      required: true,
      type: [String, Number]
    }
  },
  data () {
    return {
      category: {
        children: [],
        goods: []
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$http
        .get('/home/goods?categoryId=' + this.categoryId)
        .then((res) => {
          this.category = res.data.result[this.categoryId]
        })
    }
  }
}
</script>

<style scoped lang='less'>
@import '../styles/_mixins.less';
.xtx_goods_category {
  .home_panel_header()
}
.xtx_panel_goods {
  li {
    width: 240px;
    height: 300px;
    padding-top: 10px;
    margin-left: 10px;
    background-color: #fff;
    border: 1px solid #fff;
    overflow: hidden;
    transition: 0.3s;
    position: relative;
    float: left;

    &:hover {
      border-color: @xtxColor;

      .extra {
        bottom: 0;
      }
    }

    &:first-child {
      height: 610px;
      padding-top: 0;
      margin-left: 0;
      border: 0;
    }

    &:nth-last-child(-n + 4) {
      margin-top: 10px;
    }
  }

  a {
    display: block;
  }

  .img-box {
    width: 240px;
    height: 160px;
    padding: 0 33px;
    text-align: center;
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
  }

  .meta {
    height: 130px;
    line-height: 1.3;
    padding: 10px 22px 0;
    font-size: 16px;
    position: relative;
  }

  .name {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .price {
    font-size: 22px;
    color: @priceColor;
    position: absolute;
    bottom: 10px;

    small {
      font-size: 17px;
    }
  }

  .extra {
    width: 100%;
    height: 86px;
    padding-top: 10px;
    transition: bottom 0.3s;
    background-color: @xtxColor;
    position: absolute;
    bottom: -86px;

    span {
      display: block;
      width: 124px;
      line-height: 1;
      padding: 9px 0 8px;
      margin: 0 auto;
      text-align: center;
      font-size: 19px;
      color: #fff;

      &:last-child {
        font-size: 13px;
        border-top: 1px solid #fff;
      }
    }
  }

  .label {
    position: absolute;
    left: 0;
    bottom: 266px;

    width: 188px;
    height: 66px;
    text-align: center;
    line-height: 66px;
    color: #fff;
    font-size: 17px;
    border-radius: 0 2px 2px 0;
    background-color: rgba(0, 0, 0, 0.8);
    position: relative;

    span:first-child {
      display: block;
      width: 76px;
      background-color: #000;
    }

    span:last-child {
      width: 112px;
      line-height: 1.4;
      transform: translate(0, -50%);
      position: absolute;
      left: 76px;
      right: 0;
      top: 50%;
    }
  }
}
</style>
